/*
  打开页面
    请求回来第一页用户列表数据
    把用户列表数据渲染在表格上

  点击添加用户按钮
    需要展示一个 dialog 弹出层
    弹出层内是一个表单
    表单用于采集用户信息
    问题: 关闭对话框, 首先需要清空文本框
      下次打开时, 需要是一个全新的文本框
      解决:
        关闭对话框时, 重置表单
      什么时候会关闭对话框
        点击对话框以外的位置
        点击 x 按钮
        点击 取消 按钮
        elementUI 为 dialog 提供了一个事件
          close 事件
*/
export default {
  name: 'Users',
  data () {
    return {
      // 用户列表数据
      users: [],
      // 请求参数信息
      info: {
        // 模糊查询的参数
        query: '',
        // 当前第几页
        pagenum: 1,
        // 一页显示几条数据
        pagesize: 2
      },
      // 总条数
      total: 0,
      // 添加用户 dialog 是否显示, 默认不显示
      addUserDialog: false,
      // 添加用户的相关信息
      addUserInfo: {},
      // 添加用户表单验证
      addUserRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'change' },
          { min: 3, message: '长度至少为3个字符', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 3, message: '长度至少为3个字符', trigger: 'change' }
        ]
      },
      // 编辑用户 dialog 是否显示, 默认不显示
      editUserDialog: false,
      // 编辑用户的相关信息
      editUserInfo: {
        email: '',
        mobile: '',
        id: 0
      },
      // 权限分配 dialog 是否显示
      rightsDialog: false,
      rightsInfo: {
        username: '',
        id: 0,
        rights: ''
      },
      // 权限列表
      rightsList: []
    }
  },
  created () {
    // 发送请求, 请求用户列表数据
    this.getUsersList()
  },
  methods: {
    // 获取用户列表
    async getUsersList () {
      // 发送请求, 请求列表数据
      const { data } = await this.$get('users', { params: this.info })
      // data 中的 total 赋值给this.total
      this.total = data.total
      // data 中的 users 赋值给 this.users
      this.users = data.users
    },
    // 关闭添加用户的对话框
    closeAddUserDialogHandler () {
      // 只要关闭了对话框, 那么就重置表单
      this.$refs.addUser.resetFields()

      // 因为双向数据绑定, 还需要把 data 内的 addUserInfo 清空
      this.addUserInfo = {}
    },
    // 更改用户状态
    async changeUserStateHandler (val) {
      // val 为渲染表格当前行的数据
      // 发送请求, 进行数据修改
      const { meta } = await this.$put(`users/${val.id}/state/${val.mg_state}`)

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '修改用户状态成功'
        })
      }
    },
    // 添加用户
    async addUserHandler () {
      // 表单验证
      this.$refs.addUser.validate(async valid => {
        if (!valid) {
          return this.$message({
            type: 'error',
            message: '请按规则填写表单'
          })
        }
        // 代码执行到这里, 说明表单验证通过, 可以发送请求到服务器
        const { meta } = await this.$post('users', this.addUserInfo)
        /*
          如果创建成功
            meta.status === 201
            data 有内容
          如果创建失败
            meta.status === 400
            data 为 null
        */
        //  判断成功还是失败
        if (meta.status === 400) {
          this.$message({
            type: 'warning',
            message: meta.msg
          })
          return
        }

        // 代码来到这里, 说明添加成功, 直接提示用户, 添加成功
        this.$message({
          type: 'success',
          message: '添加用户成功'
        })

        // 关闭添加用户的 dialog 对话框
        this.addUserDialog = false

        // 重新请求列表数据
        this.getUsersList()
      })
    },
    // 删除用户的事件处理函数
    async deletUserHandler (id) {
      console.log(id)
      // 只要根据接口文档发送请求即可
      const { meta } = await this.$delete(`users/${id}`)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: meta.msg
        })
      }

      // 重新加载当前页面数据
      this.getUsersList()
    },
    // 显示编辑用户 dialog
    async showEditUserDialogHandler (id) {
      // 发送请求, 按照 id 请求用户信息
      const { data } = await this.$get('users/' + id)

      // 把拿到的信息填充到 editUserInfo 中
      this.editUserInfo.email = data.email
      this.editUserInfo.mobile = data.mobile
      this.editUserInfo.username = data.username
      this.editUserInfo.id = data.id
      this.editUserDialog = true
    },
    // 确认编辑
    async editUserHandler () {
      const { meta } = await this.$put('users/' + this.editUserInfo.id, this.editUserInfo)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '编辑用户信息成功'
        })

        // 关闭 dialog 框
        this.editUserDialog = false

        //  重新请求列表数据
        this.getUsersList()
      }
    },
    // 展示分配权限对话框
    async showRightsHandler (val) {
      // 请求用户信息, 拿到用户名进行渲染
      // 因为用户名不能修改,所以不需要后台请求了, 直接获取
      // 把 val 内的信息赋值给 rights
      this.rightsInfo.username = val.username
      this.rightsInfo.id = val.id

      // 发送请求, 请求身份列表
      // 根据句身份列表信息, 显示 select 内的数据内容
      const { data } = await this.$get('roles')
      this.rightsList = data

      // 让对话框显示出来
      this.rightsDialog = true
    },
    // 确认角色分配
    async editRightsHandler () {
      // 因为分配权限的 dialog 就是和 rightsInfo 进行了双向数据绑定
      // 所以直接使用即可
      // 直接发送请求
      const { meta } = await this.$put(`users/${this.rightsInfo.id}/role`, { rid: this.rightsInfo.rights })
      console.log(meta)

      // 判断设置成功
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '角色分配成功'
        })
        this.rightsDialog = false
        // 再次请求列表数据
        this.getUsersList()
      }
    }
  },
  watch: {
    info: {
      handler () {
        this.getUsersList()
      },
      deep: true
    }
  },
  filters: {
    ChinaTime: val => {
      const t = new Date(val * 1000)
      const year = t.getFullYear()
      const month = t.getMonth() + 1
      const date = t.getDate()
      return `${year}.${month}.${date}`
    }
  }
}
